<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			.mui-content,
			body {
				background-color: #FFFFFF;
				text-align: center;
			}
			
			span.mui-pull-right {
				position: relative;
				top: 15px;
				right: 15px;
				border: 1px solid #efeff4;
				border-radius: 30px;
				width: 55px;
				height: 26px;
				line-height: 26px;
				font-size: 12px;
			}
			
			ul {
				padding: 0;
				margin-top: 50px;
			}
			
			li {
				text-align: center;
				list-style: none;
				display: inline-block;
				width: 30%;
				margin: 10px 0;
				position: relative;
			}
			
			li img {
				width: 80%;
				border-radius: 50%;
			}
			
			li i.iconfont {
				display: none;
				position: absolute;
				right: 6%;
				bottom: 25%;
				color: #FEB406;
				width: 30px;
				height: 30px;
				font-size: 22px;
			}
			
			li span {
				display: block;
				font-size: 14px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">类型</h1>
		</header>
		<div class="mui-content">
			<span class="mui-pull-right" >全选</span>
			<ul>
				<li id="1">
					<img src="../images/png/banjia.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">搬家</span>
				</li>
				<li id="2">
					<img src="../images/png/baomu.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">保姆</span>
				</li>
				<li id="3">
					<img src="../images/png/weixiu.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">维修</span>
				</li>
				<li id="4">
					<img src="../images/png/paizhao.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">摄影</span>
				</li>
				<li id="5">
					<img src="../images/png/hunqing.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">婚庆</span>
				</li>
				<li id="6">
					<img src="../images/png/songcanyuan.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">送餐</span>
				</li>
				<li id="7">
					<img src="../images/png/fuwuyuan.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">服务员</span>
				</li>
				<li id="8">
					<img src="../images/png/huichangbuzhi.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">会场布置</span>
				</li>
				<li id="9">
					<img src="../images/png/siyizhuchang.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">司仪驻唱</span>
				</li>
				<li id="10">
					<img src="../images/png/liyimote.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">礼仪模特</span>
				</li>
				<li id="11">
					<img src="../images/png/chuandanpaifa.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">传单派发</span>
				</li>
				<li id="12">
					<img src="../images/png/youdidailian.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">游戏代练</span>
				</li>
				<li id="13">
					<img src="../images/png/daijia.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">代驾</span>
				</li>
				<li id="14">
					<img src="../images/png/daigou.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">代购</span>
				</li>
				<li id="15">
					<img src="../images/png/tongchengpaotui.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">同城跑腿</span>
				</li>
				<li id="16">
					<img src="../images/png/gengduobangban.png" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">更多帮办</span>
				</li>
				
			</ul>
			<button class="mui-btn btn-block btn-main">确定</button>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var $selectAll = $("span.mui-pull-right");
			var $icons = $("i.iconfont"), $items = $("li");
			mui.plusReady(function() {
				var typearr = plus.webview.currentWebview().mytype.split("-");
				for (var i = 0; i < typearr.length; i++) {
					$items.each(function() {
						if($(this).find('.classtext').text() == typearr[i]) {
							$(this).find('i').show();
						}
					})
				}
				changeSelected();
			})
				
			$("span.mui-pull-right").click(function() {
				if($(this).html() == '全选') {
					$icons.show();
					$(this).html('全不选');
				} else {
					$icons.hide();
					$(this).html('全选');
				}
			})
			
			$items.click(function() {
				$(this).find('i').toggle();
				changeSelected();
			})
			
			function changeSelected() {
				var allSelected = true;
				$icons.each(function() {
					if($(this).is(':hidden')) {
						allSelected = false;
					}
				})
				if(allSelected) {
					$selectAll.html('全不选');
				} else {
					$selectAll.html('全选');
				}
			}
			
			$("button").click(function() {
				var myTypeArr = [];
				$items.each(function() {
					if($(this).find('i').is(':visible')) {
						myTypeArr.push($(this).find('span').text());
					}
				})
				var myType = myTypeArr.join('-');
				var url = baseURL + 'selfInfo/updateType.json?type=' + myType;
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					var myinfoPage = plus.webview.currentWebview().opener();//获取父页面
					mui.fire(myinfoPage,'myTypeChange',{myType:myType});
					mui.back();
					mui.toast('类型修改成功');
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			})
		</script>
	</body>

</html>